<html>

<head>

    <link href="/static/goldbuilder/css/bootstrap.min.css" rel="stylesheet">

    <link href="/static/goldbuilder/css/bootstrap-theme.min.css" rel="stylesheet">

    <link href="/static/goldbuilder/css/theme.css" rel="stylesheet">

	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="/static/goldbuilder/js/bootstrap.min.js"></script>
	<script src="//code.jquery.com/jquery-1.10.2.js"></script>
	<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

	<!--
	<link rel="stylesheet" href="/resources/demos/style.css">
	-->
	
</head>

<body role="document">	

	<div class="container theme-showcase" role="main">
		
		<nav class="navbar navbar-inverse navbar-fixed-top"></nav>


		<div class="jumbotron">
	        <h1>Activity naming</h1>	        
	        <p>
	        Bellow you are presented with two fragments of a process model corresponding to the admission process of a university. In these fragments, each box represents an activity of the process.<br><br>

	        We ask you to rename with a meaningful name the activity (box) highlighted in red in the fragments bellow. You need to make sure that the
	        name you provide follows the format [Action] [Object] [Additional information] like in: <br><br>
	        
	        <i>Verify authenticity of certificates</i>

	        </p>
		</div>

		<h2> First activity:</h2>		
    	<img src="{{taskImg1}}" data-src="holder.js/400x400" class="img-thumbnail"><br>
    	
    	<p><br></p>

      	<div class="col-lg-6">
		    <div class="input-group">
		      <input id="tags1" type="text" class="form-control" placeholder="Enter here the activity name..." size="100"> <br>
		      * As you type into the field above, a list of possible activity name suggestions may appear. You are free to choose one of such suggestions
		      or provide one on your own.
		    </div><!-- /input-group -->
	 	</div><!-- /.col-lg-6 -->
	 	<br><br><br><br><br><br>

		<h2> Second activity:</h2>		
    	<img src="{{taskImg2}}" data-src="holder.js/400x400" class="img-thumbnail"><br>
    	
    	<p><br></p>

      	<div class="col-lg-6">
		    <div class="input-group">
		      <input id="tags2" type="text" class="form-control" placeholder="Enter here the activity name..." size="100"> <br>
		      * As you type into the field above, a list of possible activity name suggestions may appear. You are free to choose one of such suggestions
		      or provide one on your own.
		    </div><!-- /input-group -->
	 	</div><!-- /.col-lg-6 -->	 	

<!-- Button trigger modal -->
<br><br><br><br><br>
<button type="button" id="mybutton" class="btn btn-lg btn-success" data-toggle="modal" data-target="#myModal" onclick="submit_click()">
  Submit
</button>

<br><br><br><br><br><br><br><br><br><br>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Validation of your input</h4>
      </div>
      <div class="modal-body" id="input-val-text">
      	<!-- Validation text goes here... -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>


</div>  <!-- /container --> 


<script>
	function submit_click(){


		if($('#tags1').val().trim() == ""){
			$('#input-val-text').html("<p>Please, make sure you provided a name for each of the two activities shown in the page.</p>");	
			$('#tags1').focus();
			return;
		}

		if($('#tags2').val().trim() == ""){
			$('#input-val-text').html("<p>Please, make sure you provided a name for each of the two activities shown in the page.</p>");	
			$('#tags2').focus()
			return;
		}

		var payLoad = {};
		payLoad["processId"] = "{{processId}}";
		payLoad["instanceId"] = "{{instanceId}}";
		payLoad["taskId1"] = "{{taskId1}}";
		payLoad["proposedLabel1"] = $('#tags1').val();
		payLoad["taskId2"] = "{{taskId2}}";
		payLoad["proposedLabel2"] = $('#tags2').val();


		$.getJSON("/submitlabel", payLoad)
			.done(function(data){
				//if(!data['goldNeeded'] || (data['goldNeeded'] & data['goldMet'])){
					$('#input-val-text').html("Thanks. Your verification code is: <b>" + data['token'] + "</b></p><br><p>Go back to the " + 
						" task description page (where the main instructions where presented) and enter this code there.</p>");

					$('#mybutton').attr("disabled", true);
					$('#tags1').attr("disabled", true);
					$('#tags2').attr("disabled", true);

				//}else{
				//	$('#input-val-text').html("Sorry. The name you provided for one of the tasks does not seem appropriate. Please, try again.");
				//}
			}).fail(function() {
				$('#input-val-text').html("<p>There was an internal error in processing your submission. Please, try again latter.</p>");	
			});
	}

	$('#myModal').on('shown.bs.modal', function () {
		$('#myInput').focus()
		});  		

	$(function() {			
		$.get("/golddata", function(data){
			var availableTags = $.parseJSON(data);

			$( "#tags1" ).autocomplete({
				source: availableTags
			});

			$( "#tags2" ).autocomplete({
				source: availableTags
			});

		}).fail(function() {
		    alert( "There was an error loading data from the server." );
		});
	});
</script>   

</body>

</html>